<template>
  <div class="page-list">
    <van-pull-refresh v-model="paginationState.isRefreshing" :disabled="!currentDownOption.use || paginationState.isLoading"
      @refresh="downPullCallback">
      <div class="page-list-container" :class="[{ 'container-height': !fixed }]">
        <van-list
        class="list"
        v-model:loading="paginationState.isLoading"
        v-model:error="paginationState.isError"
          :finished="paginationState.isFinished"
          :errorText="paginationConfig.errorText"
          :finishedText="paginationConfig.finishedText"
          :offset="paginationConfig.offset"
          :immediateCheck="currentDownOption.auto"
          @load="upCallback">
          <div v-show="!paginationConfig.refresh">
            <slot></slot>
            <template v-if="paginationConfig.finished">
              <template v-if="paginationState.displayType == 1">
                <van-empty description="数据为空..." />
              </template>
            </template>
          </div>
        </van-list>
        <van-back-top  v-if="isShowBackTop && currentUpOption.isBackTop"
          right="30px" bottom="44px" />
      </div>
    </van-pull-refresh>

  </div>

</template>

<script setup>
import {
  usePageListManager
} from './hooks/usePageListManager';
import {mergeOptions} from "./core/pageOption";
const emit = defineEmits(['upCallback', 'downCallback',])
const props = defineProps({
  downOption: {
    type: Object,
  },
  upOption: {
    type: Object,
  },
  fixed: {
    type: Boolean,
    default: false,
  },
})
const currentDownOption = ref({})
const currentUpOption = ref({})
watch(
  () => props.downOption,
  (val, oldVal) => {
    currentDownOption.value = mergeOptions(val, 'downOption')
  })
watch(
  () => props.upOption,
  (val, oldVal) => {
    mergeOptions(val, 'upOption')

  })
watch(
  () => currentUpOption,
  (val) => {
    savePaginationConfig(val)
  })
const init = () => {
  currentDownOption.value = mergeOptions(props.downOption, 'downOption')
  console.log('currentDownOption', currentDownOption.value)
  currentUpOption.value = mergeOptions(props.upOption, 'upOption')
  console.log('currentUpOption', currentUpOption.value)
}
init()

const meScrollListManager = usePageListManager({
  config: currentDownOption.value,
  getList,
})
const {
  paginationState,
  paginationConfig,
  upCallback,
  savePaginationConfig,
} = meScrollListManager
const downPullCallback = () => {
  if (paginationConfig.value.loading) {
    return
  }
  emit('downCallback')
}
const isShowBackTop = ref(true)

async function getList(pageNo, pageSize) {
  emit('upCallback', {
    pageNo,
    pageSize,
  })
}
onActivated(() => {
  console.log('onActivated', 1)
  if (isShowBackTop.value) {
    return
  }
  isShowBackTop.value = true
})
onDeactivated(() => {
  console.log('onDeactivated', 2)
  isShowBackTop.value = false
})

defineExpose({
  meScrollListManager,
});

</script>

<style lang="scss" scoped>
.page-list {
  &-container {
    display: flex;
    flex-direction: column;
    flex: 1;

    &.container-height {
      min-height: 80vh;
    }
  }
}
</style>
